<template>
  <div>
    <div class="mainBox searchBox">
      <div class="widthContetn">
        <!-- <div>
          <span class="titleInput">话题：</span>
          <a-input
            v-model.trim="JobTitle"
            :allowClear="true"
            placeholder="请输入话题"
            style="width: 180px; margin-right: 24px; margin-top: 24px"
          />
        </div> -->
        <!-- 审批状态 -->
        <div>
          <span class="titleInput">审批状态：</span>
          <a-select
            :allowClear="true"
            v-model.trim="ApprovalStatus"
            placeholder="请选择审批状态"
            style="width: 180px; margin-right: 24px; margin-top: 24px"
            @change="handleChange5"
          >
            <a-select-option value="待审批"> 待审批 </a-select-option>
            <a-select-option value="通过"> 通过 </a-select-option>
            <a-select-option value="驳回"> 驳回 </a-select-option>
          </a-select>
        </div>
        <div class="Position">
          <a-button @click="clearAll" style="margin-right: 8px">
            <a-icon type="reload" />重置</a-button
          >
          <a-button type="primary" @click="searchClick(1)">
            <a-icon type="search" />查询</a-button
          >
        </div>
      </div>
    </div>
    <div class="mainBox">
      <div style="display: flex">
        <div style="font-weight: bold; line-height: 30px">投资人列表</div>
        <div style="margin-left: auto">
        </div>
               <div style="display: flex">
        <div class="searchBox">
          <a-button
            type="danger"
            style="margin-right: 15px"
            @click="showDeleteConfirm(null)"
          >
            <a-icon type="delete" />批量删除</a-button
          >
        </div>
      </div>
      </div>
      <!-- 查询区域 -->

      <!-- 表格区域 -->

      <a-table
        :scroll="{ x: true }"
        rowKey="id"
        :rowClassName="rowClassName"
        :columns="columns"
        :data-source="tableData"
          :row-selection="{
          selectedRowKeys: ids,
          onChange: onSelectChange,
        }"
        :pagination="{
          current: pagination.current,
          total: pagination.total,
          showSizeChanger: true,
          pageSizeOptions: ['5', '10', '15'],
          buildOptionText: (pageSizeOptions) => `${pageSizeOptions.value}条/页`,
          showQuickJumper: true,
          showTotal: (total) => `共 ${total} 条`,
          onShowSizeChange: onShowSizeChange,
          onChange: handleTableChange,
        }"
        style="margin-top: 24px"
      >
        <span slot="num" slot-scope="text, record, index">
          {{ (pagination.current - 1) * PageSize + parseInt(index) + 1 }}
        </span>
        <span slot="personalPhoto" slot-scope="text, record" v-if="record.personalPhoto">
          <img
            v-if="record.personalPhoto"
            :src="record.personalPhoto"
            width=" 32px"
            height="32px"
            alt=""
            style="cursor: pointer"
            v-image-preview
          />
        </span>

        <a-tooltip placement="topLeft" slot="companyName" slot-scope="text, record">
          <template slot="title">{{ record.companyName }}</template>
          <span
            :href="record.companyName"
            :style="{
              overflow: 'hidden',
              display: 'block',
              width: '100px',
              'white-space': 'nowrap',
              'text-overflow': 'ellipsis',
              cursor: 'pointer',
            }"
          >
            {{ record.companyName }}
          </span>
        </a-tooltip>
             <a-tooltip placement="topLeft" slot="investmentDirection" slot-scope="text, record">
          <template slot="title">{{ record.investmentDirection }}</template>
          <span
            :href="record.investmentDirection"
            :style="{
              overflow: 'hidden',
              display: 'block',
              width: '250px',
              'white-space': 'nowrap',
              'text-overflow': 'ellipsis',
              cursor: 'pointer',
            }"
          >
            {{ record.investmentDirection }}
          </span>
        </a-tooltip>
             <a-tooltip placement="topLeft" slot="investmentStage" slot-scope="text, record">
          <template slot="title">{{ record.investmentStage }}</template>
          <span
            :href="record.investmentStage"
            :style="{
              overflow: 'hidden',
              display: 'block',
              width: '250px',
              'white-space': 'nowrap',
              'text-overflow': 'ellipsis',
              cursor: 'pointer',
            }"
          >
            {{ record.investmentStage }}
          </span>
        </a-tooltip>
        <span slot="approvalStatus" slot-scope="text, record">
          <span
            :class="{
              dai: record.approvalStatus == '待审批',
              bo: record.approvalStatus == '驳回',
              tong: record.approvalStatus == '通过',
            }"
          >
            {{ record.approvalStatus }}
          </span>
        </span>
        <span slot="imgPath" slot-scope="text, record">
          <img
            v-if="record.imgPath"
            :src="record.imgPath"
            width=" 32px"
            height="32px"
            alt=""
            style="cursor: pointer"
            v-image-preview
          />
        </span>
        <span slot="action" slot-scope="text, record">
          <a-button
            type="link"
            @click="editList(record)"
            v-if="record.approvalStatus == '待审批'"
            >审批</a-button
          >
          <a-button
            type="link"
            @click="reject(record)"
            v-if="record.approvalStatus == '通过'"
            >驳回</a-button
          >
          <a-button
            type="link"
            @click="adopt(record)"
            v-if="record.approvalStatus == '驳回'"
            >通过</a-button
          >
          <a-button type="link" @click="jump(record)">查看</a-button>
          <!-- <a-button
          type="link"
          @click="delList(record.id)"
           
          >删除</a-button
        > -->
        </span>
      </a-table>
      <a-modal
        title="审批"
        :visible="visible"
        :closable="false"
        :width="640"
        @ok="handleSubmit"
        @cancel="handleCancel"
        cancelText="驳回"
        okText="通过"
        destroyOnClose
      >
        <span class="icone" @click="quxiao"> <a-icon type="close" /></span>
        <a-form :form="form" @submit="handleSubmit" autoComplete="off">
          <a-row>
            <a-col :span="24">
              <a-form-item label="备注">
                <a-textarea
                  v-model="remark"
                  placeholder="请输入备注"
                  :min="0"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-modal>

      <a-modal
        title="驳回"
        :visible="visible2"
        :width="640"
        @ok="handleSubmit2"
        @cancel="handleCancel2"
      >
        <a-form :form="form" @submit="handleSubmit2" autoComplete="off">
          <a-row>
            <a-col :span="24">
              <a-form-item label="备注">
                <a-textarea
                  v-model="remarkTwo"
                  placeholder="请输入备注"
                  :min="0"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-modal>
    </div>
  </div>
</template>

<script>
import {
  postAction,
  deleteAction,
  getAction,
  putAction,
  httpAction 
} from "../../http/manage";
export default {
  data() {
    return {
      baseUrl: baseUrl,
      headers: { accesstoken: sessionStorage.getItem("accesstoken") },
      form: this.$form.createForm(this),
      visible: false,
      visible2: false,
      visibleCarouselImg: false,
      carouselImg: "",
      status: "",
      remark: "",
      remarkTwo: "",
      JobTitle: "", //职位名称
      fileList: [],
      ids: [],
      PageSize: "10",
      iid: "",
      iidTwo: "",
      ApprovalStatus: undefined, //审批状态
      columns: [
        {
          title: "序号",
          scopedSlots: { customRender: "num" },
        },
        {
          title: "公司",
          dataIndex: "companyName",
          scopedSlots: { customRender: "companyName" },
        },
        {
          title: "联系方式",
          dataIndex: "contactInformation",
        },
        {
          title: "毕业院校",
          dataIndex: "graduationSchool",
        },
        {
          title: "投资方向",
          dataIndex: "investmentDirection",
           scopedSlots: { customRender: "investmentDirection" },
           width:250
        },
        {
          title: "投资阶段",
          dataIndex: "investmentStage",
           scopedSlots: { customRender: "investmentStage" },
          width:250
        },
          {
          title: "个人照片",
          dataIndex: "personalPhoto",
          scopedSlots: { customRender: "personalPhoto" },
        },
        {
          title: "个人职务",
          dataIndex: "personalPosition",
        },
        {
          title: "审批状态",
          dataIndex: "approvalStatus",
          scopedSlots: { customRender: "approvalStatus" },
        },
        {
          title: "操作",
          scopedSlots: { customRender: "action" },
        },
      ],
      tableData: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      url: {
        list: "/investor/investorSelect",
        approvalJob: "/investor/investorApproval",
        deleteList: "/investor/investorBatchDelete",
      },
    };
  },
  mounted() {
    this.getList(1);
  },
  methods: {
    // 审批状态：
    handleChange5(value) {
      this.ApprovalStatus = value;
    },
    //查看的跳转
    jump(record) {
      this.$router.push({
        path: "/investor/investorDetail",
        query: { id: record.id },
      });
    },
    convertObj(data) {
      var _result = [];
      for (var key in data) {
        var value = data[key];
        if (value.constructor == Array) {
          value.forEach(function (_value) {
            _result.push(key + "=" + _value);
          });
        } else {
          _result.push(key + "=" + value);
        }
      }
      return _result.join("&");
    },
    //表格隔行变色
    rowClassName(record, index) {
      let className = "light-row";
      if (index % 2 === 1) className = "dark-row";
      return className;
    },
     onSelectChange(ids) {
      this.ids = ids;
      console.log(ids);
    },
    //删
    showDeleteConfirm(id) {
      var that = this;
      if (!id && that.ids.length < 1) {
        that.$message.warning("请先勾选");
      } else {
        this.$confirm({
          title: "确认删除？",
          okText: "确定",
          okType: "danger",
          cancelText: "取消",
          autoFocusButton: null,
          onOk() {
            if (id) {
              httpAction(that.url.deleteList, [id], "delete")
                .then((res) => {
                  if (res.data.code == 0) {
                    that.getList(1);
                    that.$message.success("删除成功");
                  }
                })
                .catch(() => {});
            } else {
              httpAction(that.url.deleteList, that.ids, "delete")
                .then((res) => {
                  if (res.data.code == 0) {
                    that.getList(1);
                    that.ids = [];
                    that.$message.success("删除成功");
                  }
                })
                .catch(() => {});
            }
          },
          onCancel() {
            console.log("Cancel");
          },
        });
      }
    },
    handleTableChange(current, filters, sorter) {
      this.getList(current);
      console.log(current);
    },
    onShowSizeChange(current, pageSize) {
      this.PageSize = pageSize;
      this.pagination.pageSize = pageSize;
      this.getList(current);
      console.log(pageSize);
    },
    //增
    addList() {
      this.$router.push({ path: "/video/videoadd" });
    },
    quxiao() {
      this.visible = false;
    },
    getList(val) {
      let params = {
        pageSize: this.pagination.pageSize,
        pageNum: val,
        title: this.JobTitle,
        approvalStatus: this.ApprovalStatus,
      };
      postAction(this.url.list, params)
        .then((res) => {
          this.pagination.total = res.data.data.totalRows;
          this.tableData = res.data.data.list;
          this.pagination.current = val;
        })
        .catch(() => {});
    },
    //删除
    delList(id) {
      var that = this;
      this.$confirm({
        title: "确认删除？",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        autoFocusButton: null,
        onOk() {
          deleteAction(that.url.detailsDeleteList + id)
            .then((res) => {
              if (res.data.code == 0) {
                that.$message.success("删除成功");
                that.getList(1);
              }
            })
            .catch(() => {});
        },
        onCancel() {
          // ('Cancel');
        },
      });
    },
    //待审批
    editList(record) {
      this.visible = true;
      this.iid = record.id;
      // this.$store.commit("savevideo", record.videoType);
      // this.$router.push({
      //   path: "/video/videomodify",
      //   query: { id: record.id },
      // });
    },
    handleSubmit2() {
      let that = this;
      this.$confirm({
        title: "确认驳回?",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        autoFocusButton: null,
        onOk() {
          let params = {
            approvalStatus: "驳回",
            id: that.iidTwo,
            remark: that.remarkTwo,
          };
          putAction(that.url.approvalJob, params)
            .then((res) => {
              if (res.data.code == 0) {
                that.$message.success("操作成功");
                that.getList(that.pagination.current);
                that.remarkTwo = "";
                that.visible2 = false;
              }
            })
            .catch(() => {});
        },
      });
    },
    //驳回
    reject(record) {
      this.visible2 = true;
      this.iidTwo = record.id;
    },
    adopt(record) {
      let that = this;
      this.$confirm({
        title: "确认通过?",
        okText: "确定",
        okType: "Success",
        cancelText: "取消",
        autoFocusButton: null,
        onOk() {
          let params = {
            approvalStatus: "通过",
            id: record.id,
          };
          putAction(that.url.approvalJob, params)
            .then((res) => {
              if (res.data.code == 0) {
                that.$message.success("操作成功");
                that.getList(that.pagination.current);
                //  that.remarkTwo = "";
                // that.visible2 = false;
              }
            })
            .catch(() => {});
        },
      });
    },
    //提交

    handleSubmit(e) {
      // this.visible = false;
      console.log(this.iid);
      let that = this;
      this.$confirm({
        title: "确认通过？",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        autoFocusButton: null,
        onOk() {
          let data = {
            id: that.iid,
            approvalStatus: "通过",
            remark: that.remark,
          };
          putAction(that.url.approvalJob, data)
            .then((res) => {
              if (res.data.code == 0) {
                that.getList(that.pagination.current);
                that.visible = false;
                that.$message.success("操作成功");
                that.remark = "";
              }
            })
            .catch(() => {});
        },
        onCancel() {
          // ("Cancel");
        },
      });
    },
    //重置
    clearAll() {
      this.ApprovalStatus = undefined;
      this.JobTitle = "";
      this.getList(1);
    },
    //查
    searchClick() {
      this.getList(1);
    },
    handleCancel() {
      console.log(123);
      let that = this;
      let data = {
        id: that.iid,
        approvalStatus: "驳回",
        remark: this.remark,
      };
      putAction(that.url.approvalJob, data)
        .then((res) => {
          if (res.data.code == 0) {
            that.getList(this.pagination.current);
            that.visible = false;
            that.$message.success("操作成功");
            this.remark = "";
          }
        })
        .catch(() => {});
    },
    handleCancel2() {
      this.visible2 = false;
    },
  },
};
</script>

<style scoped>
.mainBox {
  background-color: #fff;
  padding: 24px 24px 24px;
  border-radius: 4px;
  border: 1px solid rgba(229, 236, 237, 1);
  box-shadow: 0px 11px 14px -10px rgba(229, 236, 237, 1);
}
.searchBox {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-top: 0;
  margin-bottom: 24px;
  /* width: 85%; */
}
.icone {
  position: absolute;
  top: 15px;
  right: 22px;
  cursor: pointer;
}
.dai {
  color: orange;
}
.bo {
  color: red;
}
.tong {
  color: #5c9cde;
}
.titleInput {
  line-height: 32px;
  white-space: nowrap;
}
.Position {
  position: absolute;
  right: 73px;
  top: 97px;
}
.widthContetn {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 85%;
  /* position: relative; */
}
</style>